<template>
	<view class="content">
		<!-- 图形验证码 -->
		<view class="code">
			<canvas class="canvas" @click="pushCode()" canvas-id="firstCanvas" id="firstCanvas"
				style="background-color: #f7f7f7;width: 200upx;height: 80upx;">
			</canvas>
		</view>

		<!-- 数字验证码 -->
		<!-- <view class="num" @click="pushCodes">
			<view class="one">
				{{math1}}
			</view>
			<view class="two">
				+
			</view>
			<view class="three">
				{{math2}}
			</view>
			<view class="four">
				=
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codes: '',
				sum: 0,
				math1: 0,
				math2: 1
			}
		},
		mounted() {
			this.pushCode();
			this.pushCodes();
		},
		methods: {
			pushCode() { //图形验证码
				var context = uni.createCanvasContext('firstCanvas', this)
				context.beginPath() // 开始路径 取消连线							
				context.setFontSize(24); //字体大小
				context.setTextAlign('center')
				context.setTextBaseline('middle')
				/* const A = ["a", "c", "d", "e", "f", "g", "Q", "R", "S", "T", "h", "i", "j", "k", "l", "m", "n", "o", "p",
					"q", "r", "s", "t",
					"u", "A", "B", "C", "D", "E", "F", "G", "H", "v", "w", "x", "y", "z", "I", "J", "K", "L", "M", "N",
					"O", "P", "U", "V", "W", "X", "Y", "Z", "1", "9", "0", "5", "3", "4", "2", "8", "6", "7"
				] */
				const A = ["a", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p",
					"q", "r", "s", "t",
					"u", "w", "x", "y", "z",
					"1", "9", "0", "5", "3", "4", "2", "8", "6", "7"
				]
				const C = ["red", "blue", "green",  "coral",  "aqua", "black", "fuchsia",
					"hotpink", "darkcyan"
				]

				const min = 0;
				const maxs = 33;
				context.fillStyle = C[Math.floor(Math.random() * 10)];
				const math = A[Math.floor(Math.random() * (maxs - min + 1) + min)];
				context.fillText(math, 10, 22); //（内容，左右距离，上下距离）
				context.fillStyle = C[Math.floor(Math.random() * 10)];
				const math2 = A[Math.floor(Math.random() * (maxs - min + 1) + min)];
				context.fillText(math2, 40, 25);
				context.fillStyle = C[Math.floor(Math.random() * 10)];
				const math3 = Math.floor(Math.random() * 10);
				context.fillText(math3, 66, 22)
				context.fillStyle = C[Math.floor(Math.random() * 10)];
				const math4 = A[Math.floor(Math.random() * (maxs - min + 1) + min)];
				context.fillText(math4, 86, 25)
				context.fill();
				context.stroke()
				context.draw() //保存(清除画布)
				this.codes = math + math2 + math3 + math4
				//console.log('验证码',this.codes)
				this.$u.vuex('vuex_code', this.codes)

				// #ifdef H5
				context.fillStyle = C[Math.floor(Math.random() * 10)];
				context.fillText(math, 10, 22); //（内容，左右距离，上下距离）
				context.fillStyle = C[Math.floor(Math.random() * 10)];
				context.fillText(math2, 35, 24);
				context.fillStyle = C[Math.floor(Math.random() * 10)];
				context.fillText(math3, 65, 22);
				context.fillStyle = C[Math.floor(Math.random() * 10)];
				context.fillText(math4, 85, 24)
				context.fill();
				context.stroke()
				context.draw() //保存(清除画布)
				this.codes = math + math2 + math3 + math4 //输入的内容等于this.codes时验证正确

				// #endif
			},
			pushCodes() { //数字验证码
				
				
				const min = 0;
				const maxs = 20;

				const A = [
					12, 19, 15, 11, 24, 30, 16, 22, 26, 14, 18, 28,
					27, 13, 17, 24, 39, 20, 21, 25, 29, 13, 23
				]
				const B = [1, 5, 3, 4, 2, 8, 6, 7]
				const math1 = A[Math.floor(Math.random() * (maxs - min + 1) + min)];
				const math2 = Math.floor(Math.random() * 10);

				this.math1 = math1
				this.math2 = math2
				this.sum = math1 + math2 //输入的数值等于this.sum时验证正确
				console.log(this.sum)
			
			}

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		//margin-top: 100upx;
	}

	.code {
		width: 200upx;
		height: 80upx;
	}





	.num {
		width: 200upx;
		height: 80upx;
		display: flex;
		justify-content: space-around;
		background-color: #f7f7f7;
	}

	.num>.one {
		height: 80upx;
		font-size: 40upx;
		font-weight: 600;
		color: firebrick;
	}

	.num>.two {
		height: 80upx;
		font-size: 40upx;
		font-weight: 600;
		color: blue;
	}

	.num>.three {
		height: 80upx;
		line-height: 75upx;
		font-size: 40upx;
		font-weight: 600;
		color: rebeccapurple;
	}

	.num>.four {
		height: 80upx;
		line-height: 30upx;
		font-size: 40upx;
		font-weight: 600;
		color: green;
	}
</style>